<template>
    <view class="gather">
        <view class="gather_wrap">
            <view class="gather_text" @click="get_personal_data">
                <text>个人资料</text>
                <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
            </view>
            <view class="gather_text">
                <text>修改密码</text>
                <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
            </view>
            <view class="gather_text">
                <text>关于小莱</text>
                <u-icon name="arrow-right" color="#d4d3d4" size="24"></u-icon>
            </view>
        </view>
        <view class="quit" @click="show = true">
            退出登录
        </view>
        <u-modal :show="show" :title="title" showConfirmButton showCancelButton @confirm="confirm" @cancel="cancel">
            <view class="slot-content">
                <rich-text :nodes="content"></rich-text>
            </view>
        </u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '提示',
            show: false,
            content: '确定退出吗'

        }
    },
    methods: {
        confirm() {
            localStorage.clear();
            setTimeout(() => {
                uni.navigateTo({ url: '/pages/login/login' })
            }, 500)
            this.show = false
        },
        //去往修改资料页
        get_personal_data() {
            uni.navigateTo({ url: '/pages/my/personal_data' })
        }
    },
}
</script>

<style lang="scss" scoped>
.gather {
    width: 100%;

    .gather_wrap {
        width: 100%;
        background-color: #fff;

        .gather_text {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid rgb(245, 241, 241);

            text {
                width: 70%;
            }


        }
    }

    .quit {
        margin-top: 30px;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #fff;
        font-size: 18px;
        color: #61c20d;
    }

}
</style>